<template>
  <layout-slot :reArticle="recentlyArticle" className="index-page onelist-page" class="bg-gray">
    <div class="post-lists">

      <div class="post-lists-body">
        <div class="post-onelist-item">
          <div class="post-onelist-item-container">
            <a :href="indexIntro.href">
              <div class="onelist-item-thumb  bg-deepgrey"
                   :style="{backgroundImage:`url(${indexIntro.indexImg})`}">
              </div>
            </a>
            <div class="onelist-item-info">
              <div class="item-title">
                <a :href="indexIntro.href" no-prefetch>
                  {{ indexIntro.title }}<span class="caret"></span>
                </a>
              </div>
              <div class="item-meta" style="font-size: 15px">
                <p>{{ blogInfo.noticeBoard }}</p>
              </div>
              <div class="item-meta" style="font-size: 15px">
                <a v-for="(item,index) of indexIntro.links" :href="item.route" :key="index" target="_blank">
                  {{ item.title }}
                </a>
              </div>
            </div>
          </div>
        </div>

        <div class="post-onelist-item" v-for="(item,i) of articleList">

          <div class="post-onelist-item-container">
            <a :href="item.url">
              <div class="onelist-item-thumb"
                   :style="{backgroundImage:`url(${item.src})`}" :class="bgClassList[i % bgClassList.length]">
              </div>
            </a>
            <div class="onelist-item-info">
              <div class="item-title">
                <a :href="item.url">
                  <span style="padding-right:10px" v-show="item.isTop">
                    <img src="../assets/img/icons/icon-top.svg">
                  </span>{{ item.title }}
                </a>
              </div>

              <div class="item-meta">
                <time :datetime="item.time" itemprop="datePublished">
                  <i class="fa fa-clock-o" aria-hidden="true"> </i> {{ item.time | dateFormat('{y}-{m}-{d}') }}
                </time>
                &nbsp;
                <span >
                  <i class="fa fa-tags" aria-hidden="true"></i>
                  <a v-for="(tmp,index) in item.category.url.split(',')" :href="'/category/' + tmp" style="padding: 0">
                    {{ `${item.category.title.split(',')[index]}`  }}{{ (index !== item.category.url.split(',').length - 1) ? ',' : '' }}
                  </a>
                </span>
                &nbsp;
                <a :href="item.comments.url" style="padding: 0">
                  <i class="fa fa-comments-o" aria-hidden="true"></i>
                  {{ item.comments.number }}
                </a>
                &nbsp;
                <span>
                    <i class="fa fa-eye" aria-hidden="true"></i>
                    {{ item.views }}
                  </span>
              </div>
              <div :class="bgClassList[i % bgClassList.length]" class="item-meta-hr"></div>
              <div class="item-content">
                <p>{{ item.abstract }}</p>
              </div>
            </div>
          </div>
        </div>


      </div>
    </div>
    <!-- 分页组件 -->
    <page-nav
      class="index-page-nav"
      :total="total"
      :currPage="currPage"
      @changeCurrPage="handlePage"
    />
  </layout-slot>
</template>

<script>
import settings from '~/settings'
import {getCommentsCount} from '~/utils'
import {getReArticle} from '~/api'

export default {
  name: 'IndexPage',
  head () {
    let blogInfo = this.$store.state.blogInfo
    return {
      title: `${blogInfo.blogTitle}-${blogInfo.blogSubtitle}`,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: blogInfo.metaDescription
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: blogInfo.metaKeywords
        }
      ]
    }
  },
  data() {
    return {


      bgClassList: ['bg-red', 'bg-orange', 'bg-yellow','bg-green','bg-indigo', 'bg-blue', 'bg-purple' ],
      indexIntro: {
        color: "",
        indexImg: this.$store.state.blogInfo.homeBgImage,
        href: '/',
        title: "ZipFang ` Blog",
        motto: "大道至简 大简至极",
        links: [
          {title: "TV", route: "/tv"},
          {title: "PAN", route: "/pan"},
          {title: "LINK", route: "/link"},
          {title: "JAVA", route: "/java"},
          {title: "GCC", route: "/gcc"},
        ]
      },
      articleList: [],
      total: 0,
      currPage: 1,
      timer: null,
      recentlyArticle: []
    }
  },
  computed: {
    blogInfo() {
      return this.$store.state.blogInfo
    }
  },
  methods: {
    handlePage(page) {
      window.open(`?page=${page}`, "_self")
    }
  },
  mounted() {
    //console.log("为什么执行了两次")
    if (process.client) {
      let urls = this.articleList.map(item => item.url)
      getCommentsCount(urls).then((res) => {
        if (Array.isArray(res)) {
          for (let [index, item] of res.entries()) {
            this.articleList[index].comments = {
              number: item.count,
              url: item.url
            }
          }
        }
      })
    }
  },
  async asyncData({params, app, route}) {
    let pageNo = 1
    if (route.query && route.query.page) {
      pageNo = route.query.page
    }
    let payload = {pageNo, pageSize: 10, cmd: 1}
    let articleList = [], total
    await app.$axios({method: "GET", url: "/article/get", params: payload}).then(({data}) => {
      if (data.code === 200) {
        articleList = data.data.map((item, index) => {
          return {
            isTop: item.articlePutTop == 1,
            color: settings.textColors[index % settings.textColors.length],
            url: `/article-detail/${item.oId}`,//item.articlePermalink,
            src: item.articleImg1URL,
            title: item.articleTitle,
            Topping: true,
            time: item.articleCreated,
            category: {
              title: item.categoryTitle ? item.categoryTitle : '-',
              url: item.categoryURI ? item.categoryURI : '-'
            },
            comments: {number: item.articleCommentCount, url: "/"},
            views: item.articleViewCount,
            abstract: item.articleAbstract
          }
        })
        total = data.total
      }
    })
    let newArticles = await getReArticle(app)
    return {articleList, total, recentlyArticle: newArticles, currPage: pageNo}
  }
}
</script>
<style lang="scss" scoped>
.index-page-nav {
  background: transparent;
  box-shadow: none;
}




.post-onelist-item-container .item-meta a:hover {
  color: #000;
  background-size: 100%;
}


.caret {
  animation-name: flash;
  width: 4px;
  height: 30px;
  background-color: #000;
  margin-left: 5px;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  display: inline-block;
  vertical-align: bottom;
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}
</style>
